<template>
	<div class="avue-top">
		<logo></logo>
		<div class="top-bar__left">
			<div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" v-if="showCollapse"><i class="icon-navicon" @click="setCollapse"></i></div>
		</div>
		<div class="top-bar__title">
			<div class="top-bar__item top-bar__item--show" v-if="showMenu"><top-menu ref="topMenu"></top-menu></div>
			<span class="top-bar__item" v-if="showSearch"><top-search></top-search></span>
		</div>
		<div class="top-bar__right">
			<el-tooltip effect="dark" :content="$t('navbar.notice')" placement="bottom" style="margin-right: 20px;">
				<div class="top-bar__item top-bar__item--show"><top-notice></top-notice></div>
			</el-tooltip>
			<el-dropdown @command="handleClick" style="margin-right: 6px;">
				<el-button plain round type="primary" size="small">
					{{ current }}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</el-button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="item.code" v-for="item in deptList" :key="item.code">{{ item.name }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
				<div class="top-bar__item"><top-color></top-color></div>
			</el-tooltip>
			<!-- 			<el-tooltip v-if="showDebug" effect="dark" :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')" placement="bottom">
				<div class="top-bar__item">
					<top-logs></top-logs>
				</div>
			</el-tooltip> -->
			<el-tooltip v-if="showLock" effect="dark" :content="$t('navbar.lock')" placement="bottom">
				<div class="top-bar__item"><top-lock></top-lock></div>
			</el-tooltip>
			<el-tooltip v-if="showTheme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
				<div class="top-bar__item top-bar__item--show"><top-theme></top-theme></div>
			</el-tooltip>
<!-- 			<el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom">
				<div class="top-bar__item top-bar__item--show"><top-lang></top-lang></div>
			</el-tooltip> -->
			<el-tooltip v-if="showFullScren" effect="dark" :content="isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')" placement="bottom">
				<div class="top-bar__item"><i :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'" @click="handleScreen"></i></div>
			</el-tooltip>
			<el-avatar size="small" icon="el-icon-user-solid"></el-avatar>
			<el-dropdown>
				<span class="el-dropdown-link">
					<span style="font-size: 16px;font-weight: bold;margin-left: 6px;">{{ userInfo.trueName }}</span>
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>
						<router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
					</el-dropdown-item>
<!-- 					<el-dropdown-item>
						<router-link to="/info/setting">{{ $t('navbar.setting') }}</router-link>
					</el-dropdown-item> -->
					<!--          <el-dropdown-item @click.native="logout"
                            divided>{{$t('navbar.logOut')}}</el-dropdown-item> -->
				</el-dropdown-menu>
			</el-dropdown>
			<el-button size="mini" type="primary" style="margin-left:12px;" @click="logout">退出登录</el-button>
		</div>
	</div>
</template>
<script>
import request from '@/router/axios';
import { resetRouter } from '@/router/router';
import { mapGetters, mapState } from 'vuex';
import { fullscreenToggel, listenfullscreen } from '@/util/util';
import topLock from './top-lock';
import topMenu from './top-menu';
import topSearch from './top-search';
import topTheme from './top-theme';
import topLogs from './top-logs';
import topColor from './top-color';
import topNotice from './top-notice';
import topLang from './top-lang';
import logo from '../logo';
export default {
	components: {
		topLock,
		topMenu,
		topSearch,
		topTheme,
		topLogs,
		topColor,
		topNotice,
		topLang,
		logo
	},
	name: 'top',
	data() {
		return {
			current: '',
			deptList: []
		};
	},
	filters: {},
	created() {
		request({
			url: '/api/SysTenant/currents'
		}).then(res => {
			this.deptList = res.data.data;
			this.current = this.deptList.find(x => x.code === this.userInfo.tenantCurr).name;
		});
	},
	mounted() {
		listenfullscreen(this.setScreen);
	},
	computed: {
		...mapState({
			showDebug: state => state.common.showDebug,
			showTheme: state => state.common.showTheme,
			showLock: state => state.common.showLock,
			showFullScren: state => state.common.showFullScren,
			showCollapse: state => state.common.showCollapse,
			showSearch: state => state.common.showSearch,
			showMenu: state => state.common.showMenu,
			showColor: state => state.common.showColor
		}),
		...mapGetters(['userInfo', 'isFullScren', 'tagWel', 'tagList', 'isCollapse', 'tag', 'logsLen', 'logsFlag'])
	},
	methods: {
		handleClick(dept) {
			this.current = this.deptList.find(x => x.code === dept).name;
			this.$store.dispatch('UpdateDept', dept).then(() => {
				window.location.reload()
				//this.$router.go(0)
				// this.$router.push({
				// 	path: this.tagWel.value
				// });
			});
		},
		handleScreen() {
			fullscreenToggel();
		},
		setCollapse() {
			this.$store.commit('SET_COLLAPSE');
		},
		setScreen() {
			this.$store.commit('SET_FULLSCREN');
		},
		logout() {
			this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning'
			}).then(() => {
				this.$store.dispatch('LogOut').then(() => {
					resetRouter();
					this.$router.push({
						path: '/login'
					});
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
	top: 40px !important;
}
</style>
